<template>
  <div>
    <el-table
      :data="tableData1"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'points', hasChildren: 'is_point' }"
    >
      <el-table-column prop="title" label="标题" width="180"> </el-table-column>
      <el-table-column prop="code" label="权限点代码" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="btn">
            <addMenu
              :type="'primary'"
              :circle="true"
              :title="'编辑菜单'"
              :form="formObj"
              @Open="Open(scope.row.id)"
              @submitForm="submitForm"
            ></addMenu>
            <removeBtn :id="scope.row.id" @remove="remove"></removeBtn>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import removeBtn from "./removeBtn.vue";
import addMenu from "./addMenu.vue";
import { detail, update } from "@/api/base/menus";
export default {
  props: ["tableData"],
  components: { removeBtn, addMenu },
  watch: {
    tableData(newValue, oldValue) {
      if (newValue !== oldValue) this.tableData1 = newValue;
    },
  },
  data() {
    return {
      tableData1: [],
      formObj: {},
    };
  },
  methods: {
    async remove(id) {
      await this.$emit("remove", id);
    },
    async Open(id) {
      const { data } = await detail({ id });
      this.formObj = data;
    },
    async submitForm(from) {
      await update(from);
      this.$emit("editSubmit");
    },
  },
};
</script>
<style>
.btn {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
</style>
